<template>
  <basic-container>
    <avue-crud :option="option"
               :data="data"
               ref="crud"
               v-model="form"
               :table-loading="loading"
               :permission="permissionList"
               :page="page"
               @refresh-change="refreshChange"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">

      <!-- 自定义添加搜索条件  按日期搜索  -->
      <template slot="search">
        <el-col  :span="12">
          <el-form-item label="分销时间"label-width="100px" style="display: inline-block;width: 50%;">
            <el-date-picker placeholder="开始时间" value-format="yyyy-MM-dd" v-model="beginTime" type="date" size="small">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="至"　label-width="40px" style="display: inline-block;width: 50%;">
            <el-date-picker placeholder="结束时间" @change="getTime" value-format="yyyy-MM-dd" v-model="endTime" type="date" size="small">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button @click="openDrawerView(scope.row)" size="mini" type="text">查看详情</el-button>
      </template>
    </avue-crud>

    <el-drawer size="60%"  title="分销详情"  top="50px" center :visible.sync="dialogFormVisible">
      <div>
        <avue-form ref="form" v-model="detailObj" :disabled=true :option="viewOption">
        </avue-form>
      </div>
    </el-drawer>
  </basic-container>
</template>

<script>
import {
  getList,detail
} from "@/api/base/member/storeRatioLog";
import { mapGetters } from "vuex";

export default {
  data () {
    return {
      beginTime: '',
      endTime: '',
      form: {},
      query: {},
      loading: true,
      rolesTree: [],
      rolesKeys: [],
      box: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      //查看详情
      dialogFormVisible: false,
      //查看详情对象
      detailObj: {},
      option: {
        size: 'mini',
        excelBtn: false,
        tip: false,
        border: true,
        index: false,
        align: "center",
        searchBtn: false,
        selection: false,
        refreshBtn: false,
        columnBtn:false,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        viewBtn: false,
        rowKey: 'id',
        height: 'auto',
        // calcHeight: 380,
        dialogType: 'dialog',
        menuWidth: 100,
        searchMenuSpan:6,
        column: [
          {
            label: "分销时间",
            prop: "addTime",
          },
          {
            label: "用户名",
            prop: "userName",
            searchSpan:5,
            search:true,
          },
          {
            label: "用户类型",
            prop: "earningsUserType",
            search:true,
            type: 'select',
            searchSpan:5,
            dicData: [
              {
                label: '普通用户',
                value: 0
              }, {
                label: '卖家',
                value: 1
              }
            ],
          },
          {
            label: "佣金金额",
            prop: "price",
          },
          {
            label: "分销类型",
            prop: "settingType",
            search:true,
            searchSpan:5,
            type: 'select',
            dicData: [
              {
                label: '分销',
                value: 1
              }, {
                label: '商品分享返利',
                value: 2
              }
            ],
          },
            {
            label: "支出/收入",
            prop: "earningsType",
            search:true,
            searchSpan:5,
            type: 'select',
            dicData: [
              {
                label: '支出',
                value: 0
              }, {
                label: '收入',
                value: 1
              }
            ],
          },
          {
            label: "来源用户",
            prop: "sourceUserName",
            searchSpan:5,
            search: true
          },
          {
            label: "订单号",
            prop: "orderNo",
            search:true,
            searchSpan:7,
          },
          ]
      },
      //详情页面
      viewOption: {
        card: true,
        submitBtn:false,
        emptyBtn: false,
        labelWidth: '120',
        column: [
          {
            label: "分销时间",
            prop: "addTime",
          },
          {
            label: "用户名",
            prop: "userName",
            search:true,
          },
          {
            label: "用户类型",
            prop: "$earningsUserType",
          },
          {
            label: "佣金金额",
            prop: "price",
          },
          {
            label: "分佣总额",
            prop: "totalPrice",
          },
          {
            label: "分佣比例",
            prop: "ratio",
          },
          {
            label: "分销类型",
            prop: "$settingType",
          },
          {
            label: "支出/收入",
            prop: "$earningsType",
          },
          {
            label: "来源用户",
            prop: "sourceUserName",
            search: true
          },
          {
            label: "订单号",
            prop: "orderNo",
          },
          {
             label: "描述",
             prop: "introduce",
             type: "textarea"
           },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission", 'userInfo']),
    permissionList () {
      return {

      };
    },
  },
  methods: {
    //打开查看详情框
    openDrawerView(row){
      this.dialogFormVisible = true;
      this.detailObj=row;
      console.log(this.detailObj);
      /*detail(row.id).then((res) => {
        if(res.data.code == 200){
          this.detailObj = res.data.data;
        }else{
          this.$message.error(res.data.message)
        }
      });*/
    },
    searchReset () {
		this.page.currentPage=1
		this.query = {};
		this.beginTime = ''
		this.endTime = ''
		this.onLoad(this.page);
    },
    searchChange (params,done) {
		this.page.currentPage=1
		let newParamsOrderNo = params.orderNo.replace(/\s*/g, "");
		params.orderNo = newParamsOrderNo;
		params.beginTime = this.beginTime
		params.endTime = this.endTime
		this.query = params;
		this.onLoad(this.page, params,done);
    },
    beforeOpen (done, type) {
      if (["edit", "view"].includes(type)) {
        getList(this.form.userName).then(res => {
          this.data = [];
          this.form = res.data.data;
        });
      }
      done();
    },
    currentChange (currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page)
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page)
    },
    refreshChange () {
      this.onLoad(this.page);
    },
    onLoad (page, params = {},done) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        if(done){
          done();
        }
        this.loading = false;
        const data = res.data;
        this.page.total = data.count;
        this.data = data.data;
        if(res.status == 200) {
          this.data=[];
          this.data = res.data.data;

        }
      });
    },
    getTime() {
      if (this.beginTime > this.endTime) {
        this.$message({
          type: "error",
          message: "结束时间不能小于开始时间"
        });
        this.endTime = ''
      }
    },
  }
};
</script>

<style>
.avue-crud__menu {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    min-height: 0px;
    height: auto;
    overflow: hidden;
    margin-bottom: 0px;
}
</style>
